<template>
  <div class="sup-coupon">
    <el-card class="sur-card">
      <div class="sur-card-title" slot="header">
        <span>优惠券管理</span>
        <el-button type="text" @click="onAddCoupon">制作优惠券</el-button>
      </div>
      <el-row>
        <div class="search-section">
          <el-form :inline="true" :model="pageVo">
            <el-form-item>
              <el-select
                v-model="pageVo.durationType"
                size="mini"
                placeholder="请选择时效类型"
              >
                <el-option :value="0" label="绝对时间"></el-option>
                <el-option :value="1" label="相对时间"></el-option>
                <el-option :value="''" label="全部"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="pageVo.useRange"
                size="mini"
                placeholder="请选择使用范围"
              >
                <el-option :value="0" label="全场可用"></el-option>
                <el-option :value="1" label="指定商品"></el-option>
                <el-option :value="2" label="指定分类"></el-option>
                <el-option :value="''" label="全部"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="pageVo.useCondition"
                size="mini"
                placeholder="请选择使用条件"
              >
                <el-option :value="0" label="无条件"></el-option>
                <el-option :value="1" label="满减"></el-option>
                <el-option :value="''" label="全部"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="pageVo.promotionWay"
                size="mini"
                placeholder="请选择优惠形式"
              >
                <el-option :value="1" label="按面额减"></el-option>
                <el-option :value="2" label="按折扣减"></el-option>
                <el-option :value="3" label="直接免费"></el-option>
                <el-option :value="''" label="全部"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button-group>
                <el-button size="mini" icon="el-icon-search" @click="onSearch"
                  >查询</el-button
                >
                <el-button
                  size="mini"
                  icon="el-icon-refresh"
                  @click="onClearSearchForm"
                  >刷新</el-button
                >
              </el-button-group>
            </el-form-item>
          </el-form>
        </div>
      </el-row>
      <el-row>
        <el-table
          :highlight-current-row="false"
          :data="couponList"
          v-loading="loadingTable"
          border
          size="mini"
          row-key="id"
        >
          <el-table-column
            align="center"
            label="序号"
            width="80px"
            type="index"
          />
          <el-table-column
            align="center"
            label="优惠券名称"
            prop="couponName"
          />
          <el-table-column align="center" label="优惠券ID" prop="id" />
          <el-table-column align="center" label="是否公开">
            <template slot-scope="scope">
              <el-tag type="danger" v-if="scope.row.isPublic">公开</el-tag>
              <el-tag type="info" v-else>私有</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            label="优惠券描述"
            width="120"
            prop="description"
          />
          <el-table-column align="center" label="优惠券时效">
            <template slot-scope="scope">
              <div v-if="scope.row.durationType == 0">
                {{ scope.row.validAt | dateFormatSec }}~
                {{ scope.row.invalidAt | dateFormatSec }}
              </div>
              <div v-if="scope.row.durationType == 1">
                领取后{{ scope.row.validDays }}天内有效
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="适用范围">
            <template slot-scope="scope">
              <div v-if="scope.row.useRange === 0">全场通用</div>
              <div v-if="scope.row.useRange === 1">
                仅限商品Id为{{ scope.row.availableItemId }}
              </div>
              <div v-if="scope.row.useRange === 2">
                仅限类目ID为{{ scope.row.availableCatId }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="使用条件" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.useCondition === 0">无条件</div>
              <div v-if="scope.row.useCondition === 1">
                适用商品总金额满{{ scope.row.amountOverQuota }}元可用
              </div>
            </template>
          </el-table-column>
          <el-table-column label="优惠形式" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.promotionWay === 1">
                符合条件即可减免{{ scope.row.faceValue }}元
              </div>
              <div v-if="scope.row.promotionWay === 2">
                符合条件折扣率为{{ scope.row.discountRate }}
              </div>
              <div v-if="scope.row.promotionWay === 3">
                符合条件即可免单
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="发行总量"
            align="center"
            prop="totalNum"
          ></el-table-column>
          <el-table-column
            label="每人限领"
            align="center"
            prop="receiptQuota"
          ></el-table-column>
          <el-table-column
            label="剩余数量"
            align="center"
            prop="leftNum"
          ></el-table-column>

          <el-table-column label="操作" align="center" width="180">
            <template slot-scope="scope">
              <el-button-group>
                <el-button size="mini" @click="onUpdateCoupon(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="onDeleteCoupon(scope.row)"
                  >删除</el-button
                >
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <el-pagination
          class="page-section"
          background
          @current-change="onPaging"
          :page-size="pageVo.size"
          @size-change="handleSizeChange"
          :page-sizes="[20, 50, 100, 200]"
          layout="sizes,prev, pager, next"
          :total="pageVo.total"
        />
      </el-row>
    </el-card>
    <!--    添加优惠券模态框-->
    <el-dialog title="编辑优惠券" :visible.sync="makeCouponVisible">
      <el-form :model="couponModel" label-position="left" label-width="120px">
        <el-form-item label="优惠券名称">
          <el-input
            v-model="couponModel.couponName"
            show-word-limit
            :maxlength="55"
          ></el-input>
        </el-form-item>
        <el-form-item label="优惠券描述">
          <el-input
            type="textarea"
            v-model="couponModel.description"
            show-word-limit
            :maxlength="100"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否公开">
          <el-switch v-model="couponModel.isPublic"> </el-switch>
        </el-form-item>
        <el-form-item label="时效类型">
          <el-select v-model="couponModel.durationType">
            <el-option :value="0" label="绝对时间"></el-option>
            <el-option :value="1" label="相对时间"></el-option>
          </el-select>
        </el-form-item>
        <template v-if="couponModel.durationType === 0">
          <el-form-item label="生效时间">
            <el-date-picker
              v-model="couponModel.validAt"
              type="datetime"
              value-format="timestamp"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="失效时间">
            <el-date-picker
              v-model="couponModel.invalidAt"
              type="datetime"
              value-format="timestamp"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
        </template>
        <template v-if="couponModel.durationType === 1">
          <el-form-item label="领取后有效天数">
            <el-input-number v-model="couponModel.validDays"></el-input-number>
          </el-form-item>
        </template>
        <el-form-item label="适用范围">
          <el-select v-model="couponModel.useRange">
            <el-option :value="0" label="全场可用"></el-option>
            <el-option :value="1" label="指定商品"></el-option>
            <el-option :value="2" label="指定分类"></el-option>
          </el-select>
        </el-form-item>
        <template v-if="couponModel.useRange === 1">
          <el-form-item label="适用商品">
            <el-input
              v-model="couponModel.availableItemId"
              placeholder="请输入商品id"
            ></el-input>
          </el-form-item>
        </template>
        <template v-if="couponModel.useRange === 2">
          <el-form-item label="适用类目">
            <el-input
              v-model="couponModel.availableCatId"
              placeholder="请输入分类id"
            ></el-input>
          </el-form-item>
        </template>
        <el-form-item label="使用条件">
          <el-select v-model="couponModel.useCondition">
            <el-option :value="0" label="无条件"></el-option>
            <el-option :value="1" label="满减"></el-option>
          </el-select>
        </el-form-item>
        <template v-if="couponModel.useCondition === 1">
          <el-form-item label="满减额度">
            <el-input-number
              precision="2"
              v-model="couponModel.amountOverQuota"
            ></el-input-number>
          </el-form-item>
        </template>
        <el-form-item label="优惠形式">
          <el-select v-model="couponModel.promotionWay">
            <el-option :value="1" label="按面额减"></el-option>
            <el-option :value="2" label="按折扣减"></el-option>
            <el-option :value="3" label="直接免费"></el-option>
          </el-select>
        </el-form-item>
        <template v-if="couponModel.promotionWay === 1">
          <el-form-item label="优惠券面额">
            <el-input-number
              min="0.01"
              max="9999"
              v-model="couponModel.faceValue"
            ></el-input-number>
          </el-form-item>
        </template>
        <template v-if="couponModel.promotionWay === 2">
          <el-form-item label="折扣率">
            <el-input-number
              min="0.01"
              max="0.99"
              v-model="couponModel.discountRate"
            ></el-input-number>
          </el-form-item>
        </template>
        <el-form-item label="限领数量">
          <el-input-number v-model="couponModel.receiptQuota"></el-input-number>
        </el-form-item>
        <el-form-item label="发行数量">
          <el-input-number v-model="couponModel.totalNum"></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button @click="onSaveCoupon" type="primary">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  addCoupon,
  deleteCoupon,
  getCouponList,
  updateCoupon
} from "@/api/admin-api/ShopCouponApi";

export default {
  name: "SupCoupon",
  data() {
    return {
      couponModel: {
        isPublic: false,
        couponName: "",
        durationType: 1,
        validAt: "",
        invalidAt: "",
        validDays: 7,
        useRange: 0,
        availableItemId: "",
        availableCatId: "",
        useCondition: 0,
        amountOverQuota: 100,
        promotionWay: 1,
        discountRate: 0.9,
        faceValue: 0.1,
        receiptQuota: 1,
        totalNum: 1
      },
      pageVo: {
        current: 1,
        size: 20,
        total: 0, //总数量
        pages: 0, //总页数
        orders: [{ column: "create_time" }], //排序字段
        durationType: null,
        useRange: null,
        useCondition: null,
        promotionWay: null
      },
      loadingTable: false,
      makeCouponVisible: false,
      couponList: []
    };
  },
  methods: {
    onDeleteCoupon(row) {
      this.$confirm(
        "确定要删除该优惠券吗,已领取的客户手中的券无法删除",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true
        }
      ).then(() => {
        deleteCoupon(row.id).then(() => {
          this.$message.success("操作成功");
          this.loadCoupons();
        });
      });
    },
    onUpdateCoupon(row) {
      this.couponModel = row;
      this.makeCouponVisible = true;
    },
    onSaveCoupon() {
      this.$loading();
      if (this.couponModel.id) {
        updateCoupon(this.couponModel).then(() => {
          this.$message.success("操作成功");
          this.loadCoupons();
          this.$loading().close();
          this.makeCouponVisible = false;
        });
      } else {
        addCoupon(this.couponModel).then(() => {
          this.$message.success("添加成功");
          this.loadCoupons();
          this.$loading().close();
          this.makeCouponVisible = false;
        });
      }
    },
    onSearch() {
      this.loadCoupons();
    },
    onClearSearchForm() {
      this.pageVo = this.$options.data().pageVo;
      this.loadCoupons();
    },
    onAddCoupon() {
      this.makeCouponVisible = true;
      this.couponModel = this.$options.data().couponModel;
    },
    loadCoupons() {
      this.loadingTable = true;
      getCouponList(this.pageVo)
        .then(data => {
          this.couponList = data.records;
          this.pageVo.current = data.current;
          this.pageVo.pages = data.pages;
          this.pageVo.total = Number(data.total);
          this.loadingTable = false;
        })
        .catch(() => {
          this.loadingTable = false;
        });
    },
    onPaging(currentPage) {
      this.pageVo.current = currentPage;
      this.loadCoupons();
    },
    handleSizeChange(val) {
      //页大小编号
      this.pageVo.size = val;
      this.loadCoupons();
    }
  },
  mounted() {
    this.loadCoupons();
  }
};
</script>

<style scoped>
.sup-coupon {
}
</style>
